<template>
  <div class="common-warp wh100 warp-bg">
    <Search
      @onSearch="handleSearch"
      :searchOptions="state.data.searchOptions"
      @change="handleChange"
    />
    <List ref="myTable" v-bind="state.data" @del="handleDel"></List>
    <Add @add="handleAdd" />
    <DelDialog ref="delDialogRef" @del="handleDialogDel" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import List from "@/components/list/index.vue";
import Add from "@/components/add/index.vue";
import Search from "@/components/search/index.vue";
import DelDialog from "@/components/delDialog/index.vue";
import {
  useAccessAreaDeleteApi,
  useAccessAreaPageApi,
  useAttendPointDeleteApi,
  useAttendPointPageApi,
} from "@/api/index";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { useUrlParams } from "@/hooks/useUrlParams";
import type { CodeName } from "@/types/common";
const { data } = useUrlParams();
const router = useRouter();
const delDialogRef = ref();

const state = reactive({
  data: {
    list: [] as CodeName[],
    config: {
      total: 0, // 列表总数
      edit: false,
      del: true,
      othenBtnOne: false,
      othenBtnTwo: false,
      othenBtnThree: false,

      submit: false,
      title: "name",
      // subtitle: 'code',
      // layout: 'vertical'//开启垂直排列
    },
    params: {
      pageNum: 1,
      pageSize: 10,
    },
    searchOptions: [{ label: "名称", value: "name" }],
  },
  showDialog: false,
});

const getData = async () => {
  let {
    data: { pageNum, pageSize, total, list },
  } = await useAttendPointPageApi(state.data.params);
  state.data.list = list || [];
  state.data.params.pageSize = pageSize;
  state.data.params.pageNum = pageNum;
  state.data.config.total = total;
};

const handleSearch = ({ selectValue, inputValue }: any) => {
  let conditions = {} as any;
  conditions[selectValue] = inputValue;
  state.data.params = Object.assign({}, state.data.params, conditions);
  getData();
};
const handleChange = () => {
  state.data.params = {
    pageNum: 1,
    pageSize: 10,
  };
};

// 新增考勤点
const handleAdd = () => {
  router.push({ name: "AddAttendPoint" });
};

// 打开删除弹窗
const handleDel = (row: CodeName) => {
  delDialogRef.value.openDialog(row);
};
// 确认删除
const handleDialogDel = async ({ code }: CodeName) => {
  await useAttendPointDeleteApi({ code });
  message.success("操作成功", 2);
  getData();
};

onMounted(() => {
  document.title = "考勤点";
  getData();
});
</script>
<style scoped lang="less"></style>
